Sprites can be added to PhSim objects using the sprite
property.
Patterns
One way of using images is to make an image have a pattern. If sprite
is an object, then sprite.repeat === true
implies that the sprite will be repeated as a pattern. Here is an example of a rectangle with a pattern:
{
shape: "rectangle",
x: 118,
y: 248,
w: 525,
h: 230,
cycle: 0,
strokeStyle: "#000000",
lineWidth: "4",
fillStyle: "#333333",
sprite: {
src: "https://raw.githubusercontent.com/mjduniverse/phsim/a872b8fdfe3dbe96d7599e665346b673f50317fa/tutorials/img/checker-black-grey.svg",
repeat: true
}
}
Size Rules
There are rules for determining the width and height of a sprite since 0.2.0-alpha
:
Let sprite
be a sprite object. Then:
-
If
sprite.w
andsprite.h
are undefined, then the dimensions of the sprite are defined by the original image's dimensions. -
If
sprite.w
is a number andsprite.h
is undefined, then the height of the sprite is set proportional tosprite.w
. -
If
sprite.h
is a number andsprite.w
is undefined, then the height of the sprite is set proportional tosprite.h
. -
If
sprite.h
is a number andsprite.w
is undefined, then the height of the sprite is set proportional tosprite.h
. -
If
sprite.w
andsprite.h
are numbers, then the width and height of the sprite is set by those numbers. -
If
sprite.fit
is true, then the width is set to being the same as the width of the parent object's bounding rectangle.